﻿<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>聊天室界面</title>
    <link rel="stylesheet" type="text/css" href="/QQ/chat.css"/>
    <Script language="javascript"></Script>
    <script src="/QQ/js/jquery.min.js"></script>
    <script src="/QQ/js/flexible.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<script>
</script>
<body>
<header class="header">
    <a class="back" href="/mine/groupChat.html"></a>
    <h5 class="tit" id="buser"></h5>
    <div class="right" id="qingkong">清空</div>
</header>
<div class="message">

</div>
<div class="footer">
    <img src="/QQ/images/hua.png" alt=""/>
    <!--<img src="/QQ/images/xiaolian.png" alt="" />-->
    <input type="text" name="neirong"/>
    <p id="fasong">发送</p>
</div>
<script>

    $(function () {
        var user = JSON.parse(sessionStorage.getItem("user"));

        //跳转到底部
        function toButtom() {
            var c = window.document.body.scrollHeight;
            window.scroll(0, c);
        }

        var parms = getParams();
        //右边发送时间
        var stime;
        //右边发送头像
        var loginHeadImg;
        //左边发送时间
        var rrtime;
        //左边发送头像
        var rrloginHeadImg;
        var sendData = [];

        //查询当前聊天室当前登录用户的未读信息
        setInterval(function () {
            $.get("/chatRooms", {roomId: parms.room, userId:user.id}, function (data) {
                console.log(data);
                if (data) {
                    $.each(data, function (index, ele) {
                        rrtime = ele.sendTime;
                        rrloginHeadImg = ele.send.headImgUrl;
                        send(rrloginHeadImg, ele.content, rrtime);

                    })
                }
                toButtom()
            })
        }, 1000)
        var json = {};
        var roomName;
        //查接聊天室的信息回显名字
        $.get("/chatRooms/roomName", {roomId:parms.room}, function (data) {
            roomName = data[0].roomName;
            $("#buser").html(roomName);
        json.roomName = roomName;
            sendData = data;
            sendData.sort(function (a, b) {
                return b.id < a.id ? 1 : -1;
            });
            // console.log(sendData);
            $.each(sendData, function (index, ele) {
                if (ele.send.id == user.id) {
                    stime = ele.sendTime;
                    loginHeadImg = ele.send.headImgUrl;
                    show(loginHeadImg, ele.content, stime);
                }
                if (ele.send.id != user.id) {
                    rrtime = ele.sendTime;
                    rrloginHeadImg = ele.send.headImgUrl;
                    send(rrloginHeadImg, ele.content, rrtime);
                }
            })
            toButtom()

        })


        json.sendState = 1;
        json.room = parms.room;
        // json.roomName = decodeURI(parms.roomName);
        //发送
        $("#fasong").click(function () {
            if ($("input[name='neirong']").val().trim() == "") {
                $(document).dialog({
                    type: 'notice',
                    infoText: '亲,内容不能为空',
                    autoClose: 2000,
                    position: 'bottom'
                });
            } else {
                var timee = "";

                function time() {
                    var data = new Date();
                    timee = data.getFullYear() + "-" + data.getMonth() + 1 + "-" + data.getDay() + " " +
                        data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds();
                }

                $(".time").html(time());
                var content = $("input[name='neirong']").val();
                json.content = $("input[name='neirong']").val();
                $.post("/chatRooms", json, function (data) {
                })
                var html = "<div class='show'><div class='time'>" + timee + "</div><div class='msg'><img src=" + user.headImgUrl + " />" +
                    "<p><i class='msg_input'></i>" + content + "</p></div></div>";
                upView(html);
                setTimeout(function () {
                    $("input[name='neirong']").val("");
                }, 50);
                toButtom();
            }

        })

        $(window).keydown(function (ev) {
            if (ev.keyCode == 13) {
                $("#fasong").click();
            }
        })


        $("#qingkong").click(function () {
            $(".show").remove();
            $(".send").remove();
        })


        /*发送消息*/
        function send(headSrc, str, rrTime) {
            var html = "<div class='send'><div class='time'>" + rrTime + "</div><div class='msg'><img src=" + headSrc + " />" +
                "<p><i class='msg_input'></i>" + str + "</p></div></div>";
            upView(html);
        }

        /*接受消息*/
        function show(headSrc, str, sstime) {
            var html = "<div class='show'><div class='time'>" + sstime + "</div><div class='msg'><img src=" + headSrc + " />" +
                "<p><i class='msg_input'></i>" + str + "</p></div></div>";
            upView(html);
        }

        /*更新视图*/
        function upView(html) {
            $('.message').append(html);
            $('body').animate({scrollTop: $('.message').outerHeight() - window.innerHeight}, 200)
        }

        function sj() {
            return parseInt(Math.random() * 10)
        }

        $(function () {
            $('.footer').on('keyup', 'input', function () {
                if ($(this).val().length > 0) {
                    $(this).next().css('background', '#114F8E').prop('disabled', true);

                } else {
                    $(this).next().css('background', '#ddd').prop('disabled', false);
                }
            })
        })


    })

</script>
</body>

</html>